<template>
    <div>
        <!-- 紧急待办区域 -->
        <div v-if="urgentTasks.length > 0">
            <div class="flex items-center justify-between mb-2">
                <h2
                    class="text-lg font-semibold text-gray-800 flex items-center"
                >
                    <el-icon class="text-orange-500 mr-2"
                        ><WarningFilled
                    /></el-icon>
                    紧急待办(今日截止)
                </h2>
                <el-button
                    type="text"
                    size="small"
                    class="text-primary"
                    @click="showAllUrgent"
                >
                    查看全部
                </el-button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <TaskCard
                    v-for="task in urgentTasks"
                    :key="task.id"
                    :task="task"
                    @submit-task="$emit('submit-task', task.id)"
                    @return-task="$emit('return-task', task.id)"
                    @group-documents="$emit('group-documents', task.id)"
                    @view-report="$emit('view-report', task.id)"
                />
            </div>
        </div>

        <!-- 待办任务列表 -->
        <div>
            <TaskTable
                :tasks="nonUrgentTasks"
                title="待办任务列表"
                icon-class="el-icon-clipboard"
                :show-action-buttons="true"
                @submit-task="$emit('submit-task', ...arguments)"
                @cancel-submit="$emit('cancel-submit', ...arguments)"
                @return-task="$emit('return-task', ...arguments)"
                @group-documents="$emit('group-documents', ...arguments)"
                @view-report="$emit('view-report', ...arguments)"
            />
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from "vue";
import { WarningFilled } from "@element-plus/icons-vue";
import TaskCard from "./TaskCard.vue";
import TaskTable from "./TaskTable.vue";

// 接收父组件参数
const props = defineProps({
    tasks: {
        type: Array,
        default: () => [],
    },
});

// 暴露事件
const emit = defineEmits([
    "submit-task",
    "cancel-submit",
    "return-task",
    "group-documents",
    "view-report",
]);

// 区分紧急和非紧急任务
const urgentTasks = computed(() => props.tasks.filter((task) => task.isUrgent));

const nonUrgentTasks = computed(() =>
    props.tasks.filter((task) => !task.isUrgent)
);

// 查看全部紧急任务
const showAllUrgent = () => {
    // 实际应用中可以滚动到紧急任务列表或筛选显示
    console.log("显示全部紧急任务");
};
</script>
